<template>
  <div id="app">
    <Slider v-slot="slotProps" :list="list" :initPage="initPage" :changeWidth="changeWidth">
      <div class="item_carousel">
        <div v-for="(item, index) in slotProps.item" :key="index" class="item_ul">{{item.name}}</div>
      </div>
    </Slider>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        [{ name: 1 }, { name: 2 }, { name: 3 }],
        [{ name: 1 }, { name: 2 }, { name: 3 }],
        [{ name: 1 }, { name: 2 }, { name: 4 }],
      ],
      initPage: false,
      changeWidth: 0,
    };
  },
  methods: {
    changeSlider(i){
      console.log('翻页触发', i)
    }
  },
};
</script>
<style lang="scss">
@import "./style/index.scss";
* {
  margin: 0;
  padding: 0;
}
#app {
  height: 100vw;
  height: 100vh;
}
.item_carousel {
  @include wh(100%, 100%);
  background-color: rgb(177, 165, 165);
  padding: 110px 90px;
  @extend .spaceBetween;
  flex-wrap: wrap;
  box-sizing: border-box;
  .item_ul {
    @include wh(260px, 540px);
    background: pink;
  }
}
</style>
